<template lang="html">
    <div class="">
        <div class="recommend-title">
            去哪儿
        </div>
        <ul >
            <li class="item border-bottom" v-for="item of weekendList" :key="item.id">
                <div class="item-img-wrapper">
                    <img class="item-img" :src="item.imgUrl" alt="">
                </div>
                <div class="item-info">
                    <p class="item-title">{{item.title}}</p>
                    <p class="item-desc">{{item.desc}}</p>

                </div>

            </li>
        </ul>
    </div>
</template>

<script>
export default {
	name: 'HomeWeekend',
	data() {
		return {

		}
	},
	props: {
		weekendList: Array
	}
}
</script>

<style lang="scss" scoped>
@import '~scss/mixins';
.recommend-title {
    line-height: 0.8rem;
    background-color: #eee;
    text-indent: 2em;

}
.item {
    .item-img-wrapper {
        height: 0;
        overflow: hidden;
        padding-bottom: 37.09%;
    }
    .item-img {
        width: 100%;
    }
    .item-info {

        padding: 0.1rem;
        min-width: 0;
        .item-title {
            line-height: 0.54rem;
            font-size: 0.32rem;
            @include ellipsis;
        }
        .item-desc {
            line-height: 0.4rem;
            color: #ccc;
            @include ellipsis;
        }
    }
}
</style>
